<template>
  <view class="container">
    <wd-form ref="form" :model="model">
      <wd-cell-group custom-class="group" title="号码设置" border>
        <wd-input
          label="号码"
          label-width="100px"
          v-model="model.phoneNumber"
          required
          clearable
          placeholder="请输入号码"
        />
      </wd-cell-group>
      <view class="fixed-button">
        <wd-button icon="check" @click="setphone" block>确认修改</wd-button>
      </view>
    </wd-form>
    <wd-toast />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useUserStore } from '@/store/user/index'
import type { PhoneSetDto, WxSetPhoneRetrunDto } from '@/API/user/types'
import { SetPhones, getopenid } from '@/API/user/index'
import { onShow } from '@dcloudio/uni-app'
import { useToast } from '@/uni_modules/wot-design-uni'

const toast = useToast()
const userstore = useUserStore()
const model = reactive<PhoneSetDto>({
  phoneNumber: '',
  openId: userstore.wxopenid
})
onShow(() => {
  if (userstore.phonenumber) {
    model.phoneNumber = userstore.phonenumber
  }
})
const setphone = async () => {
  model.openId = '11aaa'
  const res = await SetPhones(model)
  if (res.code == '200') {
    toast.success('提交成功')
    userstore.phonenumber = model.phoneNumber
    userstore.username = res.phoneName
    userstore.phoneid = res.phoneId
    getlogin(userstore.phoneid)
  } else {
    toast.error('手机验证码输入错误，请重新输入')
  }
}
//wx.login 返回结果
// {
// code: "0f1HZnml2cEqzf4hkFll2lnHHs3HZnm9"
// errMsg: "login:ok"
// errno: 0

// }
//获取到code后，再调用后台接口获取openid
const getlogin = (phoneid: string) => {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: async function (loginRes) {
      const result = await getopenid(loginRes.code, phoneid)
      userstore.wxopenid = result.openid
      // console.log(result)
    }
  })
}
</script>

<style lang="scss" scoped>
:deep(.wd-button__text) {
  font-size: 35rpx;
}
.container {
  margin: 30rpx;

  .fixed-button {
  position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #fff;
   padding: 20rpx 30rpx; /* 增加左右内边距 */
   box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
   z-index: 999; /* 确保在弹层上方 */
   display: flex;
   justify-content: flex-end;
   gap: 20rpx; /* 按钮间距 */
   /* 适配安全区域 */
   padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  }
}
</style>
